@import '~@/styles/variable.scss';

.drag-report {
  @include ps-r;
  .drag-report-title {
    margin: 2rem;
    text-align: center;
    font-size: 3rem;
  }
  .drag-report-container {
    width: 1200px;
    margin: 0 auto;
    .layout-row-box {
      @include default-flex;
      @include ps-r;
      flex-wrap: nowrap;
      margin: 2rem 0;
      .row-controller-bar {
        @include cur-all;
        @include controller-bar;
        top: -20px;
        .row-controller-bar-title-box {
          @include fl;
          @include title-margin;
          @include ellipsis;
          max-width: 20%;
        }
        .controller-bar-right-box {
          @include fr;
          .align-type-item {
            @include cur-p;
            @include title-margin;
            display: inline-block;
            &.active {
              color: $success-color;
            }
          }
          .remove-item {
            color: $danger-color;
          }
        }
      }
      .layout-col-box {
        @include default-flex;
        @include default-background-img;
        @include ps-r;
        @include default-col-style;
        @include default-col-layout;
        .col-controller-bar {
          @include controller-bar;
          top: 0;
          .col-controller-bar-title-box {
            @include fr;
            @include cur-p;
            @include title-margin;
            @include ellipsis;
            max-width: 35%;
            &.remove-item {
              color: $danger-color;
            }
          }
        }
      }
    }
  }

  .drag-report-add-box {
    @include default-flex;
    @include side-controller-box;
    background-color: $defaultControllerBoxBackground;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-flow: column;
    .title-box {
      @include controller-bar;
      top: 0;
      background-color: transparent;
      @include btn-icon;
      .el-icon-close {
        @include cur-p;
      }
    }
  }

  .drag-report-add-row-box {
    @include boxShadow;
    left: 0;
    .title-box {
      text-align: right;
      right: 0;
    }
  }
  .drag-report-add-col-box {
    @include boxShadowReversal;
    right: 0;
    .title-box {
      text-align: left;
      left: 0;
    }
  }
}

.report-ps-icon-btn {
  @include cur-p;
  @include ps-a;
  @include btn-icon;
  top: 0;
  transition: all 0.5s;
  &.drag-report-add-row-icon {
    left: 10%;
    &:hover {
      animation: transIcon 1s infinite;
    }
  }
  &.drag-report-add-col-icon {
    right: 10%;
    &:hover {
      animation: transIconReversal 1s infinite;
    }
  }
  &.drag-report-preview-icon {
    right: 5%;
  }
}
